{% extends 'template/jhTemplateV4.html'%} {% block vueTemplate %}

<!--SQL START
-- 以下为 jianghu init 工具生成的参考 SQL，使用后删除
-- 创建 page
INSERT INTO `_page` (`pageId`,`pageName`,`pageType`,`sort`,`operation`,`operationByUserId`,`operationByUser`,`operationAt`) SELECT 'driverInfoManagement','页面','showInMenu','5','jhInsert',NULL,NULL,NULL FROM DUAL WHERE NOT EXISTS (SELECT `pageId` FROM `_page` WHERE `pageId`='driverInfoManagement');

-- 创建 resource
INSERT INTO `_resource` (`accessControlTable`,`resourceHook`,`pageId`,`actionId`,`desc`,`resourceType`,`appDataSchema`,`resourceData`,`requestDemo`,`responseDemo`,`operation`,`operationByUserId`,`operationByUser`,`operationAt`) SELECT NULL,NULL,'driverInfoManagement','selectItemList','✅查询-查询列表','sql','{}','{ \"table\": \"driver_info\", \"operation\": \"select\" }','','','insert',NULL,NULL,NULL FROM DUAL WHERE NOT EXISTS (SELECT `pageId` FROM `_resource` WHERE `pageId`='driverInfoManagement' AND `actionId`='selectItemList');
INSERT INTO `_resource` (`accessControlTable`,`resourceHook`,`pageId`,`actionId`,`desc`,`resourceType`,`appDataSchema`,`resourceData`,`requestDemo`,`responseDemo`,`operation`,`operationByUserId`,`operationByUser`,`operationAt`) SELECT NULL,NULL,'driverInfoManagement','insertItem','✅查询-添加成员','sql','{}','{ \"table\": \"driver_info\", \"operation\": \"insert\" }','','','insert',NULL,NULL,NULL FROM DUAL WHERE NOT EXISTS (SELECT `pageId` FROM `_resource` WHERE `pageId`='driverInfoManagement' AND `actionId`='insertItem');
INSERT INTO `_resource` (`accessControlTable`,`resourceHook`,`pageId`,`actionId`,`desc`,`resourceType`,`appDataSchema`,`resourceData`,`requestDemo`,`responseDemo`,`operation`,`operationByUserId`,`operationByUser`,`operationAt`) SELECT NULL,NULL,'driverInfoManagement','updateItem','✅查询-更新成员','sql','{}','{ \"table\": \"driver_info\", \"operation\": \"update\" }','','','insert',NULL,NULL,NULL FROM DUAL WHERE NOT EXISTS (SELECT `pageId` FROM `_resource` WHERE `pageId`='driverInfoManagement' AND `actionId`='updateItem');
INSERT INTO `_resource` (`accessControlTable`,`resourceHook`,`pageId`,`actionId`,`desc`,`resourceType`,`appDataSchema`,`resourceData`,`requestDemo`,`responseDemo`,`operation`,`operationByUserId`,`operationByUser`,`operationAt`) SELECT NULL,NULL,'driverInfoManagement','deleteItem','✅查询-删除信息','sql','{}','{ \"table\": \"driver_info\", \"operation\": \"delete\" }','','','insert',NULL,NULL,NULL FROM DUAL WHERE NOT EXISTS (SELECT `pageId` FROM `_resource` WHERE `pageId`='driverInfoManagement' AND `actionId`='deleteItem');
SQL END!-->

<script id="app-template" type="text/html">
	<div>
		<v-app mobile-breakpoint="sm">
			<jh-menu />
			<v-main class="mt-15">
				<!-- 头部内容 >>>>>>>>>>>>> -->
				<div class="jh-page-second-bar px-8">
					<v-row>
						<v-col cols="12" xs="12" sm="12" md="4" xl="3">
							<div class="pt-3 text-h7 font-weight-bold">
								司机管理
								<!-- 帮助页按钮 -->
								<v-icon @click="isHelpPageDrawerShown = true" color="success" small>
									mdi-help-circle-outline
								</v-icon>
							</div>
							<v-breadcrumbs class="pb-3 pt-0 pl-0" :items="breadcrumbs" divider="-"></v-breadcrumbs>
						</v-col>
						<!-- 搜索条件表单 >>>>>>>> -->
						<!-- <v-col cols="12" xs="12" sm="12" md="8" xl="9">
          <v-row class="jh-backend-form-container justify-end ma-0 py-1 pb-xs-2">
            <v-col cols="12" xs="6" sm="6" md="4" xl="3" class="pa-xs-0 pb-2 pl-1 pl-xs-1">
              <v-select v-model="serverSearchInput.gender" color="success" prefix="性别：" class="jh-v-input bg-white" :items="constantObj.gender" dense filled single-line></v-select>
            </v-col>
            <v-btn class="jh-backend-search-btn elevation-0 ml-0 mt-3" color="success" small @click="doUiAction('getTableData')">
              查询
            </v-btn>
          </v-row>
        </v-col> -->
						<!-- <<<<<<<< 搜索条件表单 -->
					</v-row>
				</div>
				<!-- <<<<<<<<<<<<< 头部内容 -->

				<div class="jh-page-body-container px-8">
					<!-- 页面内容 >>>>>>>>>>>>> -->
					<v-card class="rounded-lg">
						<v-row class="ma-0 pa-4">
							<!-- 新增按钮 -->
							<v-btn color="success" class="elevation-0 mr-2" @click="doUiAction('startCreateItem')" small>
								新增
							</v-btn>
							<v-spacer></v-spacer>
							<!-- 搜索过滤 -->
							<v-col cols="12" xs="8" sm="4" md="3" xl="2" class="pa-0">
								<v-text-field
									color="success"
									v-model="searchInput"
									prefix="搜索："
									class="jh-v-input"
									dense
									filled
									single-line></v-text-field>
							</v-col>
						</v-row>
						<!-- 表格 -->
						<v-data-table
							:headers="headers"
							:items="tableData"
							:search="searchInput"
							:footer-props="{ itemsPerPageOptions: [20, 50, -1], itemsPerPageText: '每页', itemsPerPageAllText: '所有'}"
							:items-per-page="-1"
							mobile-breakpoint="0"
							:loading="isTableLoading"
							checkbox-color="success"
							:class="{'zebraLine': isTableZebraLineShown }"
							fixed-header
							class="jh-fixed-table-height elevation-0 mt-0 mb-xs-4">
							<template v-slot:item.operationAt="{ item }">{{item.operationAt | dateFormat }}</template>
							<!-- 表格操作按钮 -->
							<template v-slot:item.action="{ item }">
								<span
									role="button"
									class="success--text font-weight-medium font-size-2 mr-2"
									@click="doUiAction('startUpdateItem', item)">
									<v-icon size="16" class="success--text">mdi-note-edit-outline</v-icon>
									修改
								</span>
								<span
									role="button"
									class="success--text font-weight-medium font-size-2 mr-2"
									@click="doUiAction('deleteItem', item)">
									<v-icon size="16" class="success--text">mdi-trash-can-outline</v-icon>
									删除
								</span>
								<span
									role="button"
									class="success--text font-weight-medium font-size-2"
									@click="doUiAction('', item)">
									<v-icon size="16" class="success--text">mdi-car-back</v-icon>
									配置车辆
								</span>
							</template>
							<!-- 没有数据 -->
							<template v-slot:loading>
								<div class="jh-no-data">数据加载中</div>
							</template>
							<template v-slot:no-data>
								<div class="jh-no-data">暂无数据</div>
							</template>
							<template v-slot:no-results>
								<div class="jh-no-data">暂无数据</div>
							</template>
							<!-- 表格分页 -->
							<template v-slot:footer.page-text="pagination">
								<span>{{pagination.pageStart}}-{{pagination.pageStop}}</span>
								<span class="ml-1">共{{pagination.itemsLength}}条</span>
							</template>
						</v-data-table>
					</v-card>
					<!-- 新增抽屉 -->
					<v-navigation-drawer
						v-if="isCreateDrawerShown"
						v-model="isCreateDrawerShown"
						:permanent="isCreateDrawerShown"
						fixed
						temporary
						right
						width="80%"
						class="elevation-24">
						<v-form ref="createForm" lazy-validation>
							<!-- 抽屉标题 -->
							<v-row>
								<span class="text-subtitle-1 font-weight-medium pa-6 pl-7">新增信息</span>
							</v-row>
							<!-- 抽屉表单 -->
							<!-- <v-text-field class="jh-v-input" dense single-line filled v-model="createItem.xxxId" :rules="validationRules.requireRules"></v-text-field> -->
							<v-row class="mt-0 px-4">
								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label">
										<span class="red--text">*</span>
										司机姓名
									</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										v-model="createItem.driverName"
										:rules="validationRules.requireRules"></v-text-field>
								</v-col>

								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label">
										<span class="red--text">*</span>
										手机号
									</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										v-model="createItem.driverPhone"
										:rules="validationRules.requireRules"></v-text-field>
								</v-col>

								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label">
										<span class="red--text">*</span>
										驾驶证号
									</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										v-model="createItem.driverLicense"
										:rules="validationRules.requireRules"></v-text-field>
								</v-col>

								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label">
										<span class="red--text">*</span>
										司机身份证号
									</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										v-model="createItem.driverIdentityId"
										:rules="validationRules.requireRules"></v-text-field>
								</v-col>

								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label">联系地址</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										v-model="createItem.contactAddress"></v-text-field>
								</v-col>

								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label">司机状态（空闲、忙碌、休息/请假）</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										v-model="createItem.driverStatus"></v-text-field>
								</v-col>

								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label">备注</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										v-model="createItem.remark"></v-text-field>
								</v-col>
							</v-row>

							<!-- 抽屉操作按钮 -->
							<v-row class="justify-end mx-0 mt-8 px-6">
								<v-btn color="success" @click="doUiAction('createItem')" small>保存</v-btn>
								<v-btn class="elevation-0 ml-2" @click="isCreateDrawerShown = false" small>取消</v-btn>
							</v-row>
						</v-form>
						<!-- 抽屉关闭按钮 -->
						<v-btn
							elevation="0"
							color="success"
							fab
							absolute
							top
							left
							small
							tile
							class="drawer-close-float-btn"
							@click="isCreateDrawerShown = false">
							<v-icon>mdi-close</v-icon>
						</v-btn>
					</v-navigation-drawer>
					<!-- 编辑抽屉 -->
					<v-navigation-drawer
						v-if="isUpdateDrawerShown"
						v-model="isUpdateDrawerShown"
						:permanent="isUpdateDrawerShown"
						fixed
						temporary
						right
						width="80%"
						class="elevation-24">
						<v-form ref="updateForm" lazy-validation>
							<!-- 抽屉标题 -->
							<v-row>
								<span class="text-subtitle-1 font-weight-medium pa-6 pl-7">修改信息</span>
							</v-row>
							<!-- 抽屉表单 -->
							<v-row class="mt-0 px-4">
								<!-- <v-text-field class="jh-v-input" dense single-line filled v-model="updateItem.xxxId" :rules="validationRules.requireRules"></v-text-field> -->

								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label">
										<span class="red--text">*</span>
										司机姓名
									</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										v-model="updateItem.driverName"
										:rules="validationRules.requireRules"></v-text-field>
								</v-col>

								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label">
										<span class="red--text">*</span>
										手机号
									</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										v-model="updateItem.driverPhone"
										:rules="validationRules.requireRules"></v-text-field>
								</v-col>

								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label">
										<span class="red--text">*</span>
										驾驶证号
									</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										v-model="updateItem.driverLicense"
										:rules="validationRules.requireRules"></v-text-field>
								</v-col>

								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label">
										<span class="red--text">*</span>
										司机身份证号
									</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										v-model="updateItem.driverIdentityId"
										:rules="validationRules.requireRules"></v-text-field>
								</v-col>

								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label">联系地址</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										v-model="updateItem.contactAddress"></v-text-field>
								</v-col>

								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label">司机状态（空闲、忙碌、休息/请假）</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										v-model="updateItem.driverStatus"></v-text-field>
								</v-col>

								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label">备注</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										v-model="updateItem.remark"></v-text-field>
								</v-col>
							</v-row>
							<!-- 抽屉操作按钮 -->
							<v-row class="justify-end mx-0 mt-8 px-6">
								<v-btn color="success" @click="doUiAction('updateItem')" small>保存</v-btn>
								<v-btn class="elevation-0 ml-2" @click="isUpdateDrawerShown = false" small>取消</v-btn>
							</v-row>
						</v-form>
						<!-- 抽屉关闭按钮 -->
						<v-btn
							elevation="0"
							color="success"
							fab
							absolute
							top
							left
							small
							tile
							class="drawer-close-float-btn"
							@click="isUpdateDrawerShown = false">
							<v-icon>mdi-close</v-icon>
						</v-btn>
					</v-navigation-drawer>
					<!-- <<<<<<<<<<<<< 页面内容 -->
				</div>

				<!-- 帮助页抽屉 >>>>>>>>>>>>> -->
				<v-navigation-drawer
					v-if="isHelpPageDrawerLoaded"
					v-model="isHelpPageDrawerShown"
					:permanent="isHelpPageDrawerShown"
					fixed
					temporary
					right
					width="80%"
					class="elevation-24">
					<iframe style="border: 0" :src="`/${appInfo.appId}/pageDoc#404.md`" width="100%" height="100%"></iframe>
					<v-btn
						elevation="0"
						color="success"
						fab
						absolute
						top
						left
						small
						tile
						class="drawer-close-float-btn"
						@click="isHelpPageDrawerShown = false">
						<v-icon>mdi-close</v-icon>
					</v-btn>
				</v-navigation-drawer>
				<!-- <<<<<<<<<<<<< 帮助页抽屉 -->
			</v-main>
		</v-app>

		<jh-toast />
		<jh-mask />
		<jh-confirm-dialog />
	</div>
</script>

<div id="app"></div>

{% endblock %} {% block vueScript %} {% include 'filter/vueFilters.html' %} {% include 'common/jianghuJs/fixedTableHeightV4.html'
%}
<script type="module">
	new Vue({
		el: "#app",
		template: "#app-template",
		vuetify: new Vuetify(),
		data: () => ({
			// 面包屑
			breadcrumbs: [
				{
					text: "首页",
					disabled: true,
				},
				{
					text: "车库管理",
					disabled: true,
				},
				{
					text: "司机管理",
					disabled: true,
				},
			],
			isHelpPageDrawerShown: false,
			isHelpPageDrawerLoaded: false,
			isMobile: window.innerWidth < 500,
			// 表格相关数据
			isTableZebraLineShown: true,
			validationRules: {
				requireRules: [v => !!v || "必填"],
			},
			// 下拉选项
			constantObj: {
				gender: [
					{ value: null, text: "全部" },
					{ value: "male", text: "男" },
					{ value: "female", text: "女" },
				],
			},
			serverSearchInput: {
				gender: null,
			},
			searchInput: null,
			isTableLoading: true,
			tableData: [],
			headers: [
				{
					text: "操作",
					value: "action",
					align: "center",
					sortable: false,
					width: 200,
					class: "fixed",
					cellClass: "fixed",
				},
				{ text: "ID", value: "id", width: 120 },

				{ text: "顺序id", value: "idSequence", width: 120 },
				{ text: "司机编号", value: "driverId", width: 120 },
				{ text: "司机姓名", value: "driverName", width: 120 },
				{ text: "手机号", value: "driverPhone", width: 120 },
				{ text: "驾驶证号", value: "driverLicense", width: 120 },
				{ text: "司机身份证号", value: "driverIdentityId", width: 120 },
				{ text: "联系地址", value: "contactAddress", width: 120 },
				{ text: "司机状态（空闲、忙碌、休息/请假）", value: "driverStatus", width: 120 },
				{ text: "归属司机的车（车辆编号，厂型号，车牌号）", value: "carInDriver", width: 120 },
				{ text: "备注", value: "remark", width: 120 },
				{ text: "操作者", value: "operationByUser", width: 120 },
				{ text: "操作时间", value: "operationAt", width: 250 },
			],

			isCreateDrawerShown: false,
			createItem: {},
			createActionData: {},
			isUpdateDrawerShown: false,
			updateItem: {},
			updateItemId: null,
			updateActionData: {},
			deleteItem: {},
			deleteItemId: null,
		}),
		watch: {
			isHelpPageDrawerShown(val) {
				if (val && !this.isHelpPageDrawerLoaded) {
					this.isHelpPageDrawerLoaded = true;
				}
			},
		},
		async created() {},
		mounted() {
			this.doUiAction("getTableData");
		},
		methods: {
			async doUiAction(uiActionId, uiActionData) {
				switch (uiActionId) {
					case "getTableData":
						await this.getTableData();
						break;
					case "startCreateItem":
						await this.prepareCreateFormData();
						await this.openCreateDrawer();
						break;
					case "createItem":
						await this.prepareCreateValidate();
						await this.confirmCreateItemDialog();
						await this.prepareDoCreateItem();
						await this.doCreateItem();
						await this.closeCreateDrawer();
						await this.getTableData();
						break;
					case "startUpdateItem":
						await this.prepareUpdateFormData(uiActionData);
						await this.openUpdateDrawer();
						break;
					case "updateItem":
						await this.prepareUpdateValidate();
						await this.confirmUpdateItemDialog();
						await this.prepareDoUpdateItem();
						await this.doUpdateItem();
						await this.closeUpdateDrawer();
						await this.getTableData();
						break;
					case "deleteItem":
						await this.prepareDeleteFormData(uiActionData);
						await this.confirmDeleteItemDialog();
						await this.prepareDoDeleteItem();
						await this.doDeleteItem();
						await this.clearDeleteItem();
						await this.getTableData();
						break;
					default:
						console.error("[doUiAction] uiActionId not find", { uiActionId });
						break;
				}
			},
			/**
			 * 获取表格数据
			 */
			async getTableData() {
				this.isTableLoading = true;
				const backendSearchData = _.pickBy(this.serverSearchInput, (fieldValue, fieldKey) => {
					if (fieldValue !== null && fieldValue !== "") {
						return true;
					}
				});
				const rows = (
					await window.jianghuAxios({
						data: {
							appData: {
								pageId: "driverManagement",
								actionId: "selectItemList",
								actionData: {},
								where: backendSearchData,
								orderBy: [{ column: "operationAt", order: "desc" }],
							},
						},
					})
				).data.appData.resultData.rows;
				this.tableData = rows;
				this.isTableLoading = false;
			},
			// ---------- 新增数据 uiAction >>>>>>>>>> --------
			async prepareCreateFormData() {
				this.createItem = {};
			},

			async openCreateDrawer() {
				this.isCreateDrawerShown = true;
			},

			async prepareCreateValidate() {
				if (await this.$refs.createForm.validate()) {
					return true;
				}
				throw new Error("请完善表单信息");
			},

			async confirmCreateItemDialog() {
				if ((await window.confirmDialog({ title: "新增", content: "确定新增吗？" })) === false) {
					throw new Error("[confirmCreateFormDialog] 否");
				}
			},

			prepareDoCreateItem() {
				const { id, ...data } = this.createItem;
				this.createActionData = data;
			},

			async doCreateItem() {
				await window.jhMask.show();
				await window.vtoast.loading("新增数据");
				await window.jianghuAxios({
					data: {
						appData: {
							pageId: "driverManagement",
							actionId: "insertItem",
							actionData: this.createActionData,
						},
					},
				});
				await window.jhMask.hide();
				await window.vtoast.success("新增数据成功");
			},
			async closeCreateDrawer() {
				this.isCreateDrawerShown = false;
				this.createItem = {};
				this.createActionData = null;
			},
			// ---------- <<<<<<<<<<< 新增数据 uiAction ---------
			// ---------- 修改数据 uiAction >>>>>>>>>>>> --------
			async prepareUpdateFormData(funObj) {
				this.updateItem = _.cloneDeep(funObj);
			},

			async openUpdateDrawer() {
				this.isUpdateDrawerShown = true;
			},

			async prepareUpdateValidate() {
				if (await this.$refs.updateForm.validate()) {
					return true;
				}
				throw new Error("请完善表单信息");
			},

			async confirmUpdateItemDialog() {
				if ((await window.confirmDialog({ title: "修改", content: "确定修改吗？" })) === false) {
					throw new Error("[confirmUpdateItemDialog] 否");
				}
			},

			async prepareDoUpdateItem() {
				const { id, ...data } = this.updateItem;
				this.updateItemId = id;
				this.updateActionData = data;
			},

			async doUpdateItem() {
				await window.jhMask.show();
				await window.vtoast.loading("修改数据");
				await window.jianghuAxios({
					data: {
						appData: {
							pageId: "flowManagement",
							actionId: "updateItem",
							actionData: this.updateActionData,
							where: { id: this.updateItemId },
						},
					},
				});

				await window.jhMask.hide();
				await window.vtoast.success("修改数据成功");
			},

			async closeUpdateDrawer() {
				this.isUpdateDrawerShown = false;
				this.updateItem = {};
				this.updateActionData = null;
				this.updateItemId = null;
			},
			// ---------- <<<<<<<<<<< 修改数据 uiAction ---------
			// ---------- 删除数据 uiAction >>>>>>>>>>>> --------
			async prepareDeleteFormData(funObj) {
				this.deleteItem = _.cloneDeep(funObj);
			},
			async confirmDeleteItemDialog() {
				if ((await window.confirmDialog({ title: "删除", content: "确定删除吗？" })) === false) {
					throw new Error("[confirmDeleteItemDialog] 否");
				}
			},
			async prepareDoDeleteItem() {
				const { id } = this.deleteItem;
				this.deleteItemId = id;
			},
			async doDeleteItem() {
				await window.vtoast.loading("删除数据");
				await window.jianghuAxios({
					data: {
						appData: {
							pageId: "flowManagement",
							actionId: "deleteItem",
							actionData: {},
							where: { id: this.deleteItemId },
						},
					},
				});
				await window.vtoast.success("删除数据成功");
			},
			async clearDeleteItem() {
				this.deleteItem = {};
				this.deleteItemId = null;
			},
			// ---------- <<<<<<<<<<< 删除数据 uiAction ---------
		},
	});
</script>

<style scoped=""></style>
{% endblock %}
